<template>
  <div :class="{'mobile-detail-wrap':showMobilePage}">
    <div v-loading="infoLoading" class="sign-detail-container no-margin mobile-radius">
      <template v-if="!permissionDenied">
        <ProgressStep v-if="!showMobilePage" :mode="2" :step-list="stepList" :order-status="stepActiveId" :is-show-correct="false" :is-expedited="originalInfo.isExpedited"/>
        <explanation :explanation="explanationObj" :countdown="true" :style="`${showMobilePage ? 'margin-bottom: 0px' : ''}`" @queryProcessData="queryProcessData"/>
        <div :style="`${showMobilePage && !explanationObj.explanation? 'padding-top: 8px' : ''}`" class="sign-detail-content  small-padding">
          <Title title="基本信息" style="font-size:16px; margin:16px 0 7px 0"/>
          <el-form ref="originalForm" :class="{'mobile-el-form': showMobilePage}" :label-position="showMobilePage?'left':'right'" class="original-form" label-width="110px">
            <el-row>
              <el-col :span="8">
                <el-form-item label="审批单号：">
                  <ToolTip :content="originalInfo.sn" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="创建人：">
                  <ToolTip :content="originalInfo.createUser" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="所属部门：">
                  <ToolTip :content="originalInfo.departmentName" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="职位：">
                  <ToolTip :content="originalInfo.post" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="水印要求：" class="rel">
                  <span class="mr5">{{ originalInfo.pdfSetting | pdfSettingMap }}</span>
                  <el-tooltip :open-delay="300" placement="top" effect="dark">
                    <div slot="content">
                      <div>设置PDF原件展示水印的内容</div>
                      <div>{{ `个人：水印展示“厦门飞博共创网络科技股份有限公司 ${userInfo.jobNumber}${userInfo.userName}”` }}</div>
                      <div>公司：水印展示“厦门飞博共创网络科技股份有限公司” </div>
                      <div>无水印：不展示水印</div>
                    </div>
                    <tipIcon class="tip-icon" is-diy/>
                  </el-tooltip>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="申请说明：" prop="describe">
              <div class="describe-line">{{ originalInfo.describe }}</div>
            </el-form-item>
          </el-form>
          <div class="relation-legal">
            <Title title="合同列表" font-size="16px" style="margin: 0 0 16px"/>
            <contractList
              :contract-list="originalInfo.contractList"
              :is-edit="false"
              :id="Number(originalId)"
              :is-passed="isPassed"
              :is-create="isCreate"
              :is-current-version="isCurrentVersion"
              @updateDetail="queryoriginalInfo"
            />
          </div>
          <el-image v-if="isRevoke" :src="revokeImg" class="revoke-img"/>
        </div>
        <ExamineAndApprove
          ref="examineAndApproveRef"
          :disabled="infoLoading"
          :show-print="false"
          :process-id="processId"
          :main-id="originalId"
          :version="version"
          :get-comments-api="getoriginalComments"
          :comment-add-api="originalCommentAdd"
          :process-revocation-api="originalProcessRevocation"
          :process-recall-api="originalProcessRecall"
          :process-audit-api="originalProcessAudit"
          :create-user="createUser"
          :business-type="BUSINESS_TYPE.ORIGINAL"
          :process-type="PROCESS_TYPE.ORIGINAL"
          :audit-schedule-data="auditScheduleData"
          :senders="senders"
          :default-aduitor-list="[createUser]"
          :approval-module-type="APPROVAL_MODULE_TYPE.ORIGINAL"
          next-approve-module-id="originalId"
          redirect-url="/legal/originalDetail"
          detail-page-router-name="originalDetail"
          edit-page-router-name="originalEdit"
          @toBack="toBack"
          @handlePressSend="handlePressSend"
          @getAuditSchedule="getAuditSchedule"
          @queryProcessData="queryProcessData"
          @handleCreateNew="handleCreateNew('originalCreate',{},{ originalId: originalId,reapplyId: processId})"
          @handleSendMsg="handleSendMsg"
          @handleSender="handleSender"
          @handleModify="handleModify('originalEdit',{},{originalId: originalId,remodifyId: processId})"
          @getHistoryDetail="getHistoryDetail"
          @setCurrentVersion="setCurrentVersion"
          @freshDetail="queryoriginalInfo"
          @handleCancelPress="handleCancelPress"
        />
      </template>
      <DeniedPlaceholder v-else />
      <ding-ding-dialog
        ref="pressSendDialogRef"
        :btn1="'确认加急'"
        :btn2="'取消'"
        :show-send-checkbox="false"
        :select-with-user-load="false"
        :default-list="pressDefaultList"
        redirect-url="/legal/originalDetail"
        summary-title="加急原因"
        title="催办通知"
        @handelOK="toSend" />
    </div>
  </div>
</template>
<script>
// 组件
import ListTab from '@/components/ListTab';
import ProgressStep from '@/components/CreateOrder/orderDetail/step';
import Title from '@/components/Title';
import explanation from '@/components/Common/explanation';
import contractList from '../components/contractList';
import ExamineAndApprove from '@/components/Common/ExamineAndApprove';
// 工具函数
import { APPROVAL_MODULE_TYPE } from '@/utils/const';
import { BUSINESS_TYPE, PROCESS_TYPE } from '@/utils/const/process';
import { PROGRESS_STEP } from '@/utils/const/energy';
import { pdfSettingMap } from '@/filters/status';
import { mapState } from 'vuex';

// 图片
import revokeImg from '@/assets/auditProcess/process_status_3.png';
// API
import {
  originalInfo,
  getoriginalComments,
  originalCommentAdd,
  originalProcessRevocation,
  originalProcessRecall,
  originalProcessAudit
} from '@/api/original';
import schedule from '@/mixins/schedule';

export default {
  components: {
    ListTab,
    ProgressStep,
    Title,
    explanation,
    contractList,
    ExamineAndApprove
  },
  filters: { pdfSettingMap },
  mixins: [schedule],
  data() {
    return {
      APPROVAL_MODULE_TYPE,
      BUSINESS_TYPE,
      PROCESS_TYPE,
      revokeImg,
      originalId: '', // 签约单id
      processId: '', // 流程id
      originalInfo: {// 基本信息
        createUser: '',
        sn: '',
        departmentName: '',
        post: '',
        describe: '',
        contractList: []
      },
      stepActiveId: PROGRESS_STEP.PENDING,
      infoLoading: false,
      getoriginalComments,
      originalCommentAdd,
      originalProcessRevocation,
      originalProcessRecall,
      originalProcessAudit,
      isRevoke: false,
      listLoading: false,
      permissionDenied: false // 详情页是否可查看
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo,
      'showMobilePage': state => state.app.showMobilePage
    }),
    stepList() {
      return [
        { name: '待提交', id: PROGRESS_STEP.PENDING },
        { name: '审批中', id: PROGRESS_STEP.UNDER_REVIEW },
        { name: '已完成', id: PROGRESS_STEP.FINISHED }
      ];
    },
    isCreate() { // 创建人
      return this.userInfo.id === this.originalInfo.creatorId;
    },
    createUser() {
      let user = { id: this.originalInfo.creatorId, userName: this.originalInfo.createUser };
      if (this.isCreate) {
        user = this.userInfo;
      }
      return user;
    },
    isPassed() {
      return this.stepActiveId === 2;// 审批完成
    }
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.initRouteData();
      this.queryProcessData(); // 流程数据
    },
    initRouteData() {
      this.originalId = this.$route.query.originalId;
      this.processId = this.$route.query.processId;
      if (!this.originalId || !this.processId) {
        this.$message.warning('无法获取ID');
        const timer = setTimeout(() => {
          this.$router.back();
          clearTimeout(timer);
        }, 1500);
      }
    },
    // 获取基本信息
    queryoriginalInfo() {
      this.infoLoading = true;
      originalInfo(this.originalId).then(res => {
        this.handleProcessCheck(res.data.processId);
        this.handleDetailData(res);
      }).catch(err => {
        if (err.code === 403) {
          this.permissionDenied = true;
        }
        this.infoLoading = false;
      });
    },
    // 处理详情接口返回的数据
    handleDetailData(res) {
      this.infoLoading = false;
      if (res.code === 200) {
        if (res.data.processStatus === 3) { // 3为撤销
          this.isRevoke = true;
        } else {
          this.stepActiveId = res.data.processStatus;
          this.isRevoke = false;
        }
        this.originalInfo = res.data;
      }
    },
    queryProcessData() {
      this.queryoriginalInfo();
      this.getAuditSchedule();
      this.$nextTick(() => {
        this.$refs.examineAndApproveRef && this.$refs.examineAndApproveRef.getProcessList();
      });
    },
    getAuditSchedule() {
      this.requestAuditSchedule(this.processId);
    },
    toBack() {
      if (this.$route.query.fromTodo) {
        this.$router.go(-1);
      } else {
        this.$router.push({ name: 'original' });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.sign-detail-container{
  margin: 16px 16px 0 16px;
  background-color: #fff;
  padding-bottom: 55px;
  min-height: calc(100vh - 64px);
  .sign-detail-content{
    position: relative;
    padding: 0 24px 56px;
    .original-form {
      & ::v-deep {
        .el-col {
          .el-form-item {
            border-right: 1px solid #eee;
            color: #333;
          }
        }
        .el-col:nth-child(3n),
        .el-col:last-child {
          .el-form-item {
            border-right: none;
          }
        }
      }
      &.mobile-el-form {
        & ::v-deep {
          .el-col {
            .el-form-item {
              border-right: none !important;
            }
          }
        }
      }
      .describe-line {
        margin-top: 4px;
        line-height: 24px;
        color: #333;
      }
    }
  }
  .tip-icon {
    position: absolute;
    left: -100px;
    top: 50%;
    transform: translateY(-50%);
  }
  &::v-deep {
    .explanation-container{
      .explanation{
        padding-left: 32px!important;
      }
    }
  }
  .relation-legal{
    margin-top: 32px;
  }
  .revoke-img{
    position: absolute;
    width: 80px;
    height: 80px;
    right: 56px;
    top: 33px;
    z-index: 999;
  }
}
::v-deep .el-form-item__label {
  color: #999;
}
::v-deep .el-form-item {
  margin-bottom: 0 !important;
}
::v-deep .explanation {
  margin-bottom: 0;
}
</style>
